<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js//myAjax.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<table id="tb" border="0" align="center" width="700px">
			<tr>
				<td colspan="2">
					<img src="../img/a1.jpg"width="500px" height="320"/>
				</td>
			</tr>
			<tr id="t1">
				<td>
					<textarea id="content" style="width: 600px;" name="c.content" rows="" cols=""></textarea>
				</td>
				<td><input onclick="addComment()" type="button" name="" id="" value="添加评论" /></td>
			</tr>
		</table>

		<script type="text/javascript">
			//页面加载后将数据库数据展示出来
			$(function () {
				myAjax("get","/ajaxday02/comment/selectAll",null,function (result) {
					//将响应回来的数据(Comment对象组成的list集合)渲染到页面上
					// 1、将返回的json字符串转换为js的dom对象
					var dom = JSON.parse(result);
					// 2、DOM对象转换为jQuery对象遍历渲染
					$(dom).each(function (i,obj) {
						//obj是集合内的每一个元素  是js对象  若想调用jQuery的方法需要转为jQuery对象
						//创建tr父标签和其内的td子标签  组合成页面的显示效果
						var tr = $("<tr></tr>");
						var td1 = $("<td width=\"600px\"></td>");
						//评论内容
						td1.html(obj.content);
						var td2 = $("<td></td>");
						var button = $("<button class='bt'>[点赞]</button><input type='hidden' name='c.id'/><span></span>");
						//将button标签放进其父标签td2中
						td2.append(button);
						//点赞值
						td2.children("span").html(obj.zan);
						//id值
						td2.children("input").val(obj.id);
						//将td放进tr中
						tr.append(td1);
						tr.append(td2);
						//最后将tr放到table中
						$("#tb").append(tr);
					});
				});
			});

			//添加评论的点击事件
			function addComment() {
				//获取评论内容  按传参的格式 封装到data中
				var data = $("#content").serialize();
				// 调用myAjax工具函数
				myAjax("get","/ajaxday02/comment/addComment2",data,function (result) {
					//将响应回来的数据(Comment对象组成的list集合)渲染到页面上
					// 1、将返回的json字符串转(是一个评论对象) 换为js的dom对象
					var dom = JSON.parse(result);
					// 2、然后将此评论对象  拼接到table标签内的尾部
					//创建tr父标签和其内的td子标签  组合成页面的显示效果
					var tr = $("<tr></tr>");
					var td1 = $("<td width=\"600px\"></td>");
					//评论内容
					td1.html(dom.content);
					var td2 = $("<td></td>");
					var button = $("<button class='bt'>[点赞]</button><input type='hidden' name='c.id'/><span></span>");
					//将button标签放进其父标签td2中
					td2.append(button);
					console.log(dom.zan);
					console.log(dom.id);
					//点赞值
					td2.children("span").html(0);
					//id值
					td2.children("input").val(dom.id);
					//将td放进tr中
					tr.append(td1);
					tr.append(td2);
					//最后将tr放到table中
					$("#tb").append(tr);
                    //将输入框内容清空
                    $("#content").val("");
                });
			}
				//点赞按钮的点击事件  因为是动态增加的子标签  所以要使用事件委托
              //将子标签的特定事件委托给父标签对象
                $("#tb").on("click",".bt",function () {
                    console.log($(this));
                    var it = $(this).next();
					var data = $(this).next().serialize();
					console.log(data);
					myAjax("get","/ajaxday02/comment/updateComment",data,function (result) {
					    console.log("result:"+result);
					    console.log(it.next());
                        //更新的action方法返回的就是当前评论对象的更新后的点赞个数  即是result的值
                        it.next().html(result);
                    });
				});

		</script>
	</body>
</html>
